<template>
    <div>
        <div id="trend" style="height: 282px;width: 100%"></div>
    </div>
</template>

<script>
    import elementResizeDetectorMaker from 'element-resize-detector';
    var erd = elementResizeDetectorMaker(); //创建实例
    export default {
        name: "trend-chart",
        data() {
            return{
                chart: null,
            }
        },
        mounted() {
            this.init();
        },
        methods: {
            goAlarmList() {
                this.$router.push('/UserManagement/alarmRecord');
            },
            init() {
                var  option = {
                    tooltip: {
                        trigger: 'axis',
                        backgroundColor: 'rgba(255,255,255,1)',//通过设置rgba调节背景颜色与透明度
                        extraCssText: 'box-shadow: #ccc 1px 1px 10px;',
                        color: '#ccc',
                        textStyle: {
                            color: '#5e5e5e',
                        },
                        formatter: function (p) {
                            let {axisValue:title, seriesName:title1, data:value1,marker:marker1} = p[0],
                                {seriesName:title2, data:value2,marker:marker2} = p[1];
                            return `<div style="font-size:12px;padding: 6px;">
                               <p style="padding: 0;margin: 0;">${title}</p>
                               <p style="padding: 0;margin: 0;">${marker1}${title1}<span style="padding-left: 20px;">${value1}</span></p>
                               <p style="padding: 0;margin: 0;">${marker2}${title2}<span style="padding-left: 20px;">${value2}</span></p>
                            </div>`
                        }
                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: ['5/10','5/11','5/12','6/13','5/14','5/15','5/16','5/17','5/18','5/19','5/20','2/21']
                        }
                    ],
                    legend:{
                        left: 'center',
                        bottom:'bottom',
                    },
                    yAxis: [
                        {
                            type: 'value',
                            min: 0,
                            max: 250,
                            interval: 50,
                            axisLabel: {
                                formatter: '{value} '
                            }
                        }
                    ],
                    grid:{
                        x:50,
                        y:30,
                        x2:20,
                        y2:50,
                    },
                    series: [
                        {
                            name:'次数',
                            type:'bar',
                            barGap:'0%',
                            barWidth:20,
                            /*设置柱状图颜色*/
                            itemStyle: {
                                normal: {
                                    color: '#3c90f7',
                                }
                            },
                            data:[50, 75, 100, 150, 200, 250, 150, 100, 95, 160, 50, 45]
                        },
                        {
                            name:'人数',
                            type:'bar',
                            barWidth:20,
                            /*设置柱状图颜色*/
                            itemStyle: {
                                normal: {
                                    color: '#55bfc0',
                                }
                            },
                            data:[30, 45, 50, 10, 100, 150, 100, 140, 195, 60, 70, 65]
                        },
                        {
                            name:'次数',
                            type:'line',
                            smooth: true,
                            barWidth:0,
                            symbol: 'none',
                            itemStyle : {  /*设置折线颜色*/
                                normal : {
                                    color:'rgba(60,144,247,0.55)'
                                }
                            },
                            data:[50, 75, 100, 150, 200, 250, 150, 100, 95, 160, 50, 45]
                        },
                        {
                            name:'人数',
                            type:'line',
                            barWidth:0,
                            smooth: true,
                            symbol: 'none',
                            itemStyle : {  /*设置折线颜色*/
                                normal : {
                                    color:'rgba(85,191,192,0.56)'
                                }
                            },
                            data:[30, 45, 50, 10, 100, 150, 100, 140, 195, 60, 70, 65]
                        },
                    ]
                };
                let that = this;
                // 基于准备好的dom，初始化echarts实例
                this.chart = this.$echarts.init(document.getElementById('trend'));
                this.chart.showLoading({
                    text: '数据正在努力加载...',
                    color: '#1890ff',
                    textStyle: { fontSize : 20 , color: '#444' },
                    effectOption: {backgroundColor: 'rgba(0, 0, 0, 0)'}
                });
                //防止出现多次点击
                if(this.chart._$handlers.click) {
                    this.chart._$handlers.click.length = 0;
                }
                //点击事件
                this.chart.on('click', function() {
                    that.goAlarmList();
                })
                // 使用刚指定的配置项和数据显示图表。
                this.chart.setOption(option);
                setTimeout(() => {
                    this.chart.hideLoading();
                }, 500)
                setTimeout(() => {
                    window.onresize =  () => {
                        this.chart.resize();
                    }
                },200);
                //监听id为box的元素
                erd.listenTo(this.$el,()=>{
                    this.chart.resize();
                });
            }
        },
        beforeDestroy(){
            erd.uninstall(this.$el);
        },
    }
</script>

<style scoped>
.das {

}
</style>
